<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.q1 {
				width: 400px;
				height: 400px;
				border: 1px solid black;
			}

			.q2 {
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}

			.a1 {
				background-color: antiquewhite;
			}

			.a2 {
				background-color: gold;
			}

			.a3 {
				background-color: yellow;
			}
		</style>
	</head>
	<body>

		<!-- 	绑定样式:
		1。class样式s.一
		写法:class="xxx"xxx可以是字符串、对象、数组。
		字符串写法适用于:类名不确定，要动态获取。
		对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
		数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
		2. style样式
		:style="{fontsize: xxx}"其中xxx是动态值。: style="[a,b]"其中a、b是样式对象。 -->
		<div id="app">
			<!-- //v-bind:属性名=表达式
			//设置元素的属性(比如 src,class,title) -->
			<!-- 绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div :class="classobj">555</div>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						classobj: {
							q1: true,
							q2: false,
							a1: true,
							a2: false,
							a3: false
						}
					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {},
				//计算属性
				computed: {},
				//监视属性
				watch: {},
			});
			//29
		</script>
	</body>
</html>
